<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>161渲染商品案例</title>
  <style>
    li {
      float: left;
    }
  </style>
</head>

<body>
  <h1>161渲染商品案例</h1>
  <ul id="goodsList"></ul>
  <script>
    const goodsList = [
      {
        id: '001',
        name: '电饭煲',
        price: 999,
        picture: './image/电饭煲.png'
      },
      {
        id: '001',
        name: '电饭煲',
        price: 888,
        picture: './image/电饭煲.png'
      },
      {
        id: '001',
        name: '电饭煲',
        price: 777,
        picture: './image/电饭煲.png'
      }
    ]
    let htmlContext = ''
    goodsList.forEach(item => {
      /* 
        htmlContext += `
        <li>
          <img src="${item.picture}">
          <p>${item.name}</p>
          <p>${item.price}元</p>
        </li>
      `
      */
      const { name, price, picture } = item
      htmlContext += `
        <li>
          <img src="${picture}">
          <p>${name}</p>
          <p>${price}元</p>
        </li>
      `
    })
    let oUl = document.querySelector('#goodsList')
    oUl.innerHTML = htmlContext
  </script>
</body>

</html>